<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>订单详情</title>
<base href="${ctx}">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<link href="/static/dist/css/font-awesome.min.css" rel="stylesheet"
	type="text/css" />
<link href="/static/plugins/datatables/css/matrix-style.css"
	rel="stylesheet" type="text/css" />
<link href="/static/dist/css/AdminLTE.css" rel="stylesheet"
	type="text/css" />
<link href="/static/plugins/datatables/css/dataTables.bootstrap.css"
	rel="stylesheet" type="text/css" />
<link href="/static/css/common/order/ordeeDetail.css" rel="stylesheet"
	type="text/css" />

<!-- jQuery 2.1.4 -->
<script src="/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- datatable -->
<script src="/static/plugins/datatables/jquery.dataTables.js"
	type="text/javascript"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		setTimeout("changeDivStyle();", 100); // 0.1秒后展示结果，因为HTML加载顺序，先加载脚本+样式，再加载body内容。所以加个延时
		var tr = "";
		tr += "<tr><td> <c:out value="${orderDetail.productId}"></c:out></td>"
				+ "<td><c:out value="${orderDetail.productName}"></c:out></td>"
				+ "<td><c:out value="${orderDetail.num}"></c:out></td>"
				+ "<td><c:out value="${orderDetail.price}"></c:out></td>"
				+ "<td><c:out value="${orderDetail.totalMoney}"></c:out></td></tr>"
		$("#productTable").append(tr);
	});
	function changeDivStyle() {
		var o_status = $("#o_status").val(); //获取隐藏框值
		//    var o_status =1;
		if (o_status == 0) {
			$('#create').css('background', '#DD0000');
			$('#createText').css('color', '#DD0000');
			$('#financial').addClass('hide');
			$('#logistics').addClass('hide');
			$('#hr').addClass('hide');
			$('#orderMoney').addClass('hide');
		} else if (o_status == 1) {
			$('#create').css('background', '#DD0000');
			$('#createText').css('color', '#DD0000');
			$('#financial').addClass('hide');
			$('#logistics').addClass('hide');
			$('#hr').addClass('hide');
		} else if (o_status == 2) {
			$('#create').css('background', '#DD0000');
			$('#createText').css('color', '#DD0000');
			$('#pay').css('background', '#DD0000');
			$('#payText').css('color', '#DD0000');
			$('#li1').css('background', '#DD0000');
			$('#logistics').addClass('hide');
		} else if (o_status == 3) {
			$('#create').css('background', '#DD0000');
			$('#createText').css('color', '#DD0000');
			$('#pay').css('background', '#DD0000');
			$('#payText').css('color', '#DD0000');
			$('#received').css('background', '#DD0000');
			$('#receivedText').css('color', '#DD0000');
			$('#li1').css('background', '#DD0000');
			$('#li2').css('background', '#DD0000');
		} else if (o_status == 4) {
			$('#create').css('background', '#DD0000');
			$('#createText').css('color', '#DD0000');
			$('#pay').css('background', '#DD0000');
			$('#payText').css('color', '#DD0000');
			$('#received').css('background', '#DD0000');
			$('#receivedText').css('color', '#DD0000');
			$('#completed').css('background', '#DD0000');
			$('#completedText').css('color', '#DD0000');
			$('#li1').css('background', '#DD0000');
			$('#li2').css('background', '#DD0000');
			$('#li3').css('background', '#DD0000');
		} else {
			$('#create').css('background', '#DD0000');
			$('#createText').css('color', '#DD0000');
			$('#pay').css('background', '#DD0000');
			$('#payText').css('color', '#DD0000');
			$('#received').css('background', '#DD0000');
			$('#receivedText').css('color', '#DD0000');
			$('#completed').css('background', '#DD0000');
			$('#completedText').css('color', '#DD0000');
			$('#li1').css('background', '#DD0000');
			$('#li2').css('background', '#DD0000');
			$('#li3').css('background', '#DD0000');
		}
	};
</script>
</head>
<body>
	<!--订单状态-->
	<div class="orderStatus">
		<input type="hidden" value=${orderDetail.status } id="o_status" />
		<!--后台传到页面的数据-->
		<div class="stepInfo">
			<ul>
				<li id="li1"></li>
				<li id="li2"></li>
				<li id="li3"></li>
			</ul>
			<div class="stepIco stepIco1" id="create">
				1
				<div class="stepText" id="createText">下单</div>
				<div class="stepText">
					<fmt:formatDate value='${orderDetail.deliveryDate}'
						pattern='yyyy-MM-dd HH:mm:ss' />
				</div>
			</div>
			<div class="stepIco stepIco2" id="pay">
				2
				<div class="stepText" id="payText">付款</div>
				<div class="stepText">
					<fmt:formatDate value='${orderDetail.payDate}'
						pattern='yyyy-MM-dd HH:mm:ss' />
				</div>
			</div>
			<div class="stepIco stepIco3" id="received">
				3
				<div class="stepText" id="receivedText">发货</div>
				<div class="stepText">
					<fmt:formatDate value='${orderDetail.sendDate}'
						pattern='yyyy-MM-dd HH:mm:ss' />
				</div>
			</div>
			<div class="stepIco stepIco4" id="completed">
				4
				<div class="stepText" id="completedText">完成</div>
				<div class="stepText">
					<fmt:formatDate value='${orderDetail.acceptDate}'
						pattern='yyyy-MM-dd HH:mm:ss' />
				</div>
			</div>
		</div>
	</div>
	<div style="height: 160px;"></div>
	<!--会员信息-->
	<div id="member">
		<table class="table">
			<tbody>
				<tr>
					<th colspan="2" class="text-left">
						<h4>
							会员ID:<span>${orderDetail.memberId}</span>
						</h4>
					</th>
					<th colspan="2" class="text-left">
						<h4>
							会员名称:<span> <c:choose>
									<c:when
										test="${orderDetail.memberName eq null or orderDetail.memberName eq ''}">
								${orderDetail.memberPhone}
							</c:when>
									<c:when
										test="${orderDetail.memberPhone eq null or orderDetail.memberPhone eq ''}">
								${orderDetail.memberName}
							</c:when>
								</c:choose>
							</span>
						</h4> <%-- <h4>
							会员名称:<span>${orderDetail.memberName}</span>
						</h4> --%>
					</th>
				</tr>
				<tr>
					<td colspan="2" class="text-left">联系人:<span>${orderDetail.contact}</span></td>
					<td colspan="2" class="text-left">联系电话:<span>${orderDetail.telPhone}</span></td>
					<td colspan="2" class="text-left">收货地址:<span>${orderDetail.addrDetail}</span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<!--会员信息结束-->
	<hr>
	<!--供应商信息开始-->
	<div id="applyer">
		<table class="table">
			<tbody>
				<tr>
					<th colspan="2" class="text-left">
						<h4>
							供应商ID:<span>${orderDetail.supplierId}</span>
						</h4>
					</th>
					<th colspan="2" class="text-left">
						<h4>
							供应商全称:<span>${orderDetail.supplierName}</span>
						</h4>
					</th>
				</tr>
				<tr>
					<td colspan="2" class="text-left">联系人:<span>${orderDetail.personName}</span></td>
					<td colspan="2" class="text-left">联系电话:<span>${orderDetail.personTel}</span></td>
					<td colspan="2" class="text-left">发货地址:<span>${orderDetail.address}</span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<!--供应商信息结束-->
	<hr>
	<div id="order">
		<div style="width: 60%;margin: 0 auto;text-align: left;">
			<h3>商品信息</h3>
			<h4>
				订单号:<span>${orderDetail.orderNo}</span>
				<%--  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="totalMoney">商品总金额：<span
                style="color: blue">${orderDetail.money}</span></span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="orderMoney">订单总金额：<span
                style="color: red">${orderDetail.totalCost}</span></span> --%>
			</h4>
		</div>
		<table id="productTable" class="table">
			<thead>
				<th data-name="id">编号</th>
				<th data-name="">商品名称</th>
				<th data-name="">商品数量</th>
				<th data-name="">单价</th>
				<th data-name="">总额</th>
			</thead>
		</table>
	</div>
	<hr>
	<div id="financial" style="width: 60%;margin: 0 auto;text-align: left;">
		<h3>财务信息</h3>
		<div>
			<p>
				商品总额:<span>${orderDetail.totalMoney}</span>
			</p>
			<p>
				物流费用:<span>${orderDetail.postage}</span>
			</p>
			<p>
				订单总额:<span> ${orderDetail.payMoney}</span>
			</p>
			<%--  <p>银行流水号:<span>${orderDetail.contacts}</span></p> --%>
		</div>
	</div>
	<hr id="hr">
	<div id="logistics" style="width: 60%;margin: 0 auto;text-align: left;">

		<h3>物流信息</h3>
		<div>
			<p>
				物流公司:<span>${orderDetail.logisticName}</span>
			</p>
			<p>
				物流编号:<span>${orderDetail.logisticNo}</span>
			</p>
			<%-- <p>物流进度:<span>${orderDetail.contact}</span></p> --%>
		</div>
	</div>
</body>
</html>